<template>
  <div class="home-container">
    <!-- 欢迎横幅 -->
    <div class="welcome-banner">
      <h1 class="welcome-title">欢迎使用康复管理系统</h1>
      <p class="welcome-subtitle">专业的康复指南管理平台</p>
    </div>

    <!-- 功能卡片区域 -->
    <div class="feature-cards">
      <!-- 医生角色（DOCTOR，且不是管理员）- 只显示指南管理和个人中心，一排显示 -->
      <div v-if="isDoctor" class="card-row-single">
        <!-- 指南管理卡片 -->
        <div class="feature-card" @click="navigateToGuide">
          <div class="card-icon">
            <t-icon name="book" size="48" />
          </div>
          <h3 class="card-title">指南管理</h3>
          <p class="card-description">管理和维护康复指南内容</p>
        </div>
        <!-- 个人中心卡片 -->
        <div class="feature-card" @click="navigateToUser">
          <div class="card-icon">
            <t-icon name="user-circle" size="48" />
          </div>
          <h3 class="card-title">个人中心</h3>
          <p class="card-description">查看和管理个人信息</p>
        </div>
      </div>

      <!-- 管理员和超级管理员角色（ADMIN/SUPER_ADMIN）- 2x2网格布局 -->
      <div v-else-if="isAdmin" class="card-row-2x2">
        <!-- 指南管理卡片 左上角 -->
        <div class="feature-card" @click="navigateToGuide">
          <div class="card-icon">
            <t-icon name="book" size="48" />
          </div>
          <h3 class="card-title">指南管理</h3>
          <p class="card-description">管理和维护康复指南内容</p>
        </div>
        <!-- 人员管理卡片 右上角 -->
        <div class="feature-card" @click="navigateToEmployee">
          <div class="card-icon">
            <t-icon name="user" size="48" />
          </div>
          <h3 class="card-title">人员管理</h3>
          <p class="card-description">查看和管理人员信息</p>
        </div>
        <!-- 建议管理卡片 左下角 -->
        <div class="feature-card" @click="navigateToAdvice">
          <div class="card-icon">
            <t-icon name="chat-bubble" size="48" />
          </div>
          <h3 class="card-title">建议管理</h3>
          <p class="card-description">管理和维护系统建议</p>
        </div>
        <!-- 个人中心卡片 右下角 -->
        <div class="feature-card" @click="navigateToUser">
          <div class="card-icon">
            <t-icon name="user-circle" size="48" />
          </div>
          <h3 class="card-title">个人中心</h3>
          <p class="card-description">查看和管理个人信息</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ROLES } from '@/constants';
import { useUserStore } from '@/store';
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

// 定义组件名称
defineOptions({
  name: 'HomeIndex',
});

const router = useRouter();
const userStore = useUserStore();

// 获取用户角色数组
const roles = computed<string[]>(() => ((userStore.userInfo as any).role as string[]) || []);
// 是否为管理员或更高（ADMIN 或 SUPER_ADMIN）
const isAdmin = computed(() => roles.value.includes(ROLES.ADMIN) || roles.value.includes(ROLES.SUPER_ADMIN));
// 是否为医生但不是管理员（仅 DOCTOR）
const isDoctor = computed(() => roles.value.includes(ROLES.DOCTOR) && !isAdmin.value);

// 统计数据
const stats = ref({
  guideCount: 0,
  userCount: 0,
  viewCount: 0,
});

// 导航到指南管理页面
const navigateToGuide = () => {
  router.push('/guide/index');
};

// 导航到用户中心页面
const navigateToUser = () => {
  router.push('/user/index');
};

// 导航到人员管理页面
const navigateToEmployee = () => {
  router.push('/employee/index');
};

// 导航到建议管理页面
const navigateToAdvice = () => {
  router.push('/suggestion/index');
};

// 导航到指南详情页面
const navigateToGuideDetail = () => {
  router.push('/detail/guide');
};

// 组件挂载时初始化数据
onMounted(() => {
  // 模拟获取统计数据
  stats.value = {
    guideCount: 25,
    userCount: 156,
    viewCount: 1247,
  };
});
</script>

<style lang="less" scoped>
/* 首页容器样式 - 使用主题变量确保深色模式适配 */
.home-container {
  padding: 24px;
  /* 使用页面背景色变量，支持深色模式 */
  background-color: var(--td-bg-color-page);
  min-height: 100vh;
  /* 添加过渡效果，使主题切换更平滑 */
  transition: background-color 0.3s ease;
}

/* 欢迎横幅样式 - 使用主题色渐变 */
.welcome-banner {
  /* 使用主题色变量创建渐变背景 */
  background: linear-gradient(135deg, var(--td-brand-color) 0%, var(--td-brand-color-1) 100%);
  border-radius: 12px;
  padding: 48px 32px;
  text-align: center;
  margin-bottom: 32px;
  /* 深色模式下文字保持白色，浅色模式下也保持白色以确保对比度 */
  color: white;
  /* 添加阴影效果，深色模式下更明显 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* 添加过渡效果 */
  transition: all 0.3s ease;
}

.welcome-title {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 12px 0;
  /* 确保文字在深色模式下清晰可见 */
  color: white;
}

.welcome-subtitle {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
  /* 确保文字在深色模式下清晰可见 */
  color: white;
}

.feature-cards {
  margin-top: 32px;
  margin-bottom: 32px;
}

.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* 康复师单行布局样式 */
.card-row-single {
  /* 康复师角色使用单行布局，两个卡片并排显示 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  /* 移除最大宽度限制，让卡片与2x2布局保持相同大小 */
  /* max-width: 800px; */
  /* margin: 0 auto; */
}

/* 功能卡片样式 - 完全使用主题变量 */
.feature-card {
  /* 使用容器背景色变量，支持深色模式 */
  background: var(--td-bg-color-container);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  /* 使用组件边框色变量 */
  border: 1px solid var(--td-component-stroke);
  /* 使用主题阴影变量，深色模式下自动调整 */
  box-shadow: var(--td-shadow-1);

  &:hover {
    transform: translateY(-4px);
    /* 悬停时使用更深的阴影 */
    box-shadow: var(--td-shadow-2);
    border-color: var(--td-brand-color);
  }
}

.card-icon {
  /* 图标使用主题色 */
  color: var(--td-brand-color);
  margin-bottom: 16px;
  /* 添加过渡效果 */
  transition: color 0.3s ease;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  /* 使用主要文字颜色变量 */
  color: var(--td-text-color-primary);
  /* 添加过渡效果 */
  transition: color 0.3s ease;
}

.card-description {
  font-size: 14px;
  /* 使用次要文字颜色变量 */
  color: var(--td-text-color-secondary);
  margin: 0;
  line-height: 1.5;
  /* 添加过渡效果 */
  transition: color 0.3s ease;
}

/* 统计区域样式 - 使用主题变量 */
.stats-section {
  /* 使用容器背景色变量 */
  background: var(--td-bg-color-container);
  border-radius: 12px;
  padding: 32px;
  /* 使用组件边框色变量 */
  border: 1px solid var(--td-component-stroke);
  /* 添加过渡效果 */
  transition: all 0.3s ease;
}

.stats-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 24px 0;
  /* 使用主要文字颜色变量 */
  color: var(--td-text-color-primary);
  /* 添加过渡效果 */
  transition: color 0.3s ease;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.stat-item {
  text-align: center;
  padding: 24px;
  /* 使用容器背景色变量 */
  background: var(--td-bg-color-container);
  border-radius: 8px;
  /* 使用组件边框色变量 */
  border: 1px solid var(--td-component-stroke);
  /* 添加过渡效果 */
  transition: all 0.3s ease;
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  /* 数字使用主题色 */
  color: var(--td-brand-color);
  margin-bottom: 8px;
  /* 添加过渡效果 */
  transition: color 0.3s ease;
}

.stat-label {
  font-size: 14px;
  /* 使用次要文字颜色变量 */
  color: var(--td-text-color-secondary);
  font-weight: 500;
  /* 添加过渡效果 */
  transition: color 0.3s ease;
}

.card-row-2x2 {
  /* 2x2网格布局，四个卡片分别在四个角 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-container {
    padding: 16px;
  }

  .welcome-banner {
    padding: 32px 24px;
  }

  .welcome-title {
    font-size: 24px;
  }

  .card-row {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .card-row-2x2 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }

  /* 康复师单行布局在移动端也改为垂直排列 */
  .card-row-single {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
  }
}

/* 深色模式特殊优化 */
:root[theme-mode='dark'] {
  .welcome-banner {
    /* 深色模式下调整渐变效果 */
    background: linear-gradient(135deg, var(--td-brand-color) 0%, var(--td-brand-color-2) 100%);
    /* 深色模式下增强阴影效果 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  .feature-card {
    /* 深色模式下增强悬停效果 */
    &:hover {
      box-shadow: var(--td-shadow-3);
      /* 深色模式下悬停时边框更明显 */
      border-color: var(--td-brand-color-1);
    }
  }
}
</style>
